import { createStore, Commit } from 'vuex'
import axios from 'axios'


// 接口
interface UserProps {
    isLogin: boolean;
    name?: string;
    id?: number;
    columnId?: number;  // 通过当前字段拿到用户的columnId，1对1的关系
}


// 图片接口
interface ImageProps {
    _id?: string;
    url?: string;
    createdAt?: string;
}


export interface ColumnProps {
    _id: string;
    title: string;
    avatar?: ImageProps;
    description: string;
}


export interface PostProps {
    _id?: string;
    id: number;
    title: string;
    content: string;
    image?: ImageProps;
    createdAt: string;
    columnId: number;
    column?: string;
}

// 定义一个全局的
export interface GlobalDataProps {
    loading: boolean; // 控制loading
    columns: ColumnProps[];
    posts: PostProps[];
    user: UserProps;
}


// 抽离函数
const getAndCommit = async (url: string, mutationName: string, commit: Commit) => {
    
    const { data } = await axios.get(url)
    commit(mutationName, data)
}


//* createStore接受一个泛型，返回一个包裹类型的store，所以我们现在把这些类型给它写出来，确定整个 store的类型
const store = createStore<GlobalDataProps>({
    state: {

        // 控制loading 
        loading: false,
        columns: [],
        posts: [],
        user: {
            // 控制 登录 / 未登录显示状态
            isLogin: true,
            // 登录后显示的用户名
            name: 'viking',
            // 对应id为1的专栏,新建文章提交到 专栏1
            columnId: 1
        }
    },
    mutations: {
        login(state) {
            state.user = { ...state.user, isLogin: true, name: 'viking' }
        },
        //  newPost = 把详情当做参数传递过来
        createPost(state, newPost) {
            state.posts.push(newPost)

        },

        // 处理 axios获取 
        fetchColumns(state, rawData) {
            state.columns = rawData.data.list
        },

        fetchColumn(state, rawData) {
            state.columns = [rawData.data]
        },

        fetchPosts(state, rawData) {
            state.posts = rawData.data.list
        },

        // 控制loading
        setLoading(state, playing) {
            state.loading = playing
        }

    },
    actions: {

        // 获取图片
        async fetchColumns({ commit }) {
            //    const {data} = await axios.get('/columns')
            //    commit('fetchColumns',data)
            //*  抽离成下列函数
            getAndCommit('columns', 'fetchColumns', commit)
        },

        async fetchColumn({ commit }, cid) {
            // const {data} = await axios.get(`/columns/${cid}`)
            // commit('fetchColumn',data)
            getAndCommit(`/columns/${cid}`, 'fetchColumn', commit)
        },

        async fetchPosts({ commit }, cid) {
            // const { data } = await axios.get(`/columns/${cid}/posts`)
            // commit('fetchPosts',data)
            getAndCommit(`/columns/${cid}/posts`, 'fetchPosts', commit)
        }
    },
    getters: {
        // 获取专栏的id
        getColumnById: (state) => (id: string) => {
            return state.columns.find(c => c._id === id)
        },

        // 把专栏id 与 文章 id，一一对应起来，这样就能做到对应的专栏显示对应的文章详情了
        getPostsByCid: (state) => (cid: string) => {
            return state.posts.filter(post => post.column === cid)
        }
    }
})

export default store